<template>
  <Modal :value="visible"
         :closable="false"
		 footer-hide
         @on-visible-change="onChangeVisible"
         width="469"
         class-name="vertical-center-modal">
    <div class="urge">
		<div class="urge-top">
			<div class="urge-left">
				{{title}}
			</div>
			<img src="../../../../assets/new/new_close.png" @click.stop="onClickCancel">
		</div>
      <!-- 催办 -->
      <ul class="form-ul">
        <!-- <li class="form-ul-li">
          <p class="li-title">日期：</p>
          <DatePicker :value='date'
                      type="date"
                      style="width: 100%"
                      @on-change="onChangeDate"></DatePicker>
        </li> -->
        <li class="form-ul-li">
          <p class="li-title">催办描述：</p>
          <Input v-model="remark"
                 maxlength="-1"
                 :rows="3"
                 type="textarea"
                 placeholder="催办描述" />
        </li>
      </ul>
		<div class="urge-btn">
			<Button class="urge-btn-left" @click.stop="onClickCancel">取消</Button>
			<Button class="urge-btn-right" type="primary"
			        @click.stop="onClickConfirm">确定</Button>
		</div>
    </div>
  </Modal>
</template>

<script>
export default {
  components: {},
  model: {
    prop: 'visible',
    event: 'onChange'
  },
  props: {
    title: {
      type: String,
      default: '催办'
    },
    visible: Boolean,
    dataId: String
  },
  data () {
    return {
      remark: '',
      // date: ''
    }
  },
  methods: {
    // 选择日期
    onChangeDate (date) {
      this.date = date
    },
    // 确定按钮
    onClickConfirm () {
      let params = {
        caseIds: this.dataId,
        remark: this.remark
      }
      this.loading = true
      this.$http.urgePatrolCase(params).then(res => {
        this.$Message.info(res.message)
        if (res.code === 200) {
          this.loading = false
          this.$emit('onClickConfirm')
          this.$emit('onChange', false)
        }
      }).catch(err => {
        this.loading = false
      })
    },
    onClickCancel () {
      this.$emit('onClickCancel')
      this.$emit('onChange', false)
    },
    onChangeVisible (boo) {
      if (!boo) {
        this.$emit('onChange', false)
        this.$emit('update:dataId', '')
        this.resetData()
      }
    },
    resetData () {
      this.remark = ''
      // this.date = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.form-minheight {
  height: 300px;
}
.form-ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  li {
    width: 100%;
  }
  .half {
    width: 48%;
    margin-right: 2%;
  }
}
.urge{
	width: 469px;
	height: 321px;
	background: url(../../../../assets/new/new_form_482.png) 0 0 no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
	.urge-top{
		width: 400px;
		height: 48px;
		font-size: 16px;
		color: #FFFFFF;
		font-weight: bold;
		line-height: 1;
		background: url(../../../../assets/new/new_tx_bgc.png) 0 0 no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 23px;
		margin: 34px 0 0 32px;
		img{
			width: 18px;
			height: 18px;
			cursor: pointer;
		}
	}
	ul{
		padding: 26px 58px 0 54px;
		.form-ul-li{
			display: flex;
		}
		.li-title{
			width: 100px;
			font-size: 14px;
			color: #CCCCCC;
			font-weight: bold;
			padding-top: 4px;
		}
		::v-deep{
			.ivu-input-type-textarea{
				height: 80px;
			}
			textarea{
				height: 80px;
				font-size: 14px;
			}
		}
	}
	.urge-btn{
		border-top: 1px solid #0D9DFF;
		line-height: 46px;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 18px;
		margin: 26px 58px;
		.urge-btn-left{
			width: 60px;
			height: 34px;
			font-size: 16px;
			font-weight: bold;
			background-color: #FFFFFF;
			color: #333333;
			margin-right: 60px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.urge-btn-right{
			width: 60px;
			height: 34px;
			font-size: 16px;
			font-weight: bold;
			background-color: #0D9DFF;
			border-color: #0D9DFF;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
::v-deep{
	.ivu-modal-body{
		padding: 0;
	}
}
</style>